import React, { PureComponent } from 'react';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import { Form, Button, Divider, Card, Row, Col, Input } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ModalDemo from './ModalDemo';

/**
 * 关键字 <= 数据
 */
const mapStateToProps = models => {
  const model = models.lvchanglong;
  return {
    formRecord: model.formRecord,
    result: model.result,
    modalShow: model.modalShow,
  };
};

/**
 * 关键字 <= 方法
 */
const mapDispatchToProps = dispatch => ({
  modalShow: () => {
    dispatch({ type: `lvchanglong/save`, payload: { modalShow: true } });
  },
  loadData: () => {
    dispatch({ type: `lvchanglong/random` });
  },
  submitRecord: record => {
    dispatch({ type: `lvchanglong/plus`, payload: record });
  },
});

@connect(
  mapStateToProps,
  mapDispatchToProps
)
class Index extends PureComponent {
  componentDidMount = () => {
    const { loadData } = this.props;
    loadData();
  };

  render() {
    const { form, formRecord, result, submitRecord, modalShow } = this.props;

    return (
      <PageHeaderWrapper title={formatMessage({ id: '困难' })}>
        <Card bordered={false}>
          <Form layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={6} sm={24}>
                <Form.Item label={formatMessage({ id: '被加数' })}>
                  {form.getFieldDecorator('a', {
                    rules: [
                      {
                        required: true,
                        message: formatMessage({ id: '请输入' }) + formatMessage({ id: '被加数' }),
                      },
                    ],
                    initialValue: formRecord.a,
                  })(<Input />)}
                </Form.Item>
              </Col>

              <Col md={6} sm={24}>
                <Form.Item label={formatMessage({ id: '加数' })}>
                  {form.getFieldDecorator('b', {
                    rules: [
                      {
                        required: true,
                        message: formatMessage({ id: '请输入' }) + formatMessage({ id: '加数' }),
                      },
                    ],
                    initialValue: formRecord.b,
                  })(<Input />)}
                </Form.Item>
              </Col>

              <Col md={6} sm={24}>
                <Button
                  type="primary"
                  onClick={() => {
                    form.validateFieldsAndScroll((error, record) => {
                      if (!error) {
                        console.log(record);
                        submitRecord({ formRecord: record });
                      }
                    });
                  }}
                >
                  {formatMessage({ id: '求和' })}
                </Button>
                &nbsp;&nbsp;&nbsp;
                <Button
                  onClick={() => {
                    form.resetFields();
                    submitRecord({ formRecord: { a: 0, b: 0 } });
                  }}
                >
                  {formatMessage({ id: '重置' })}
                </Button>
                &nbsp;&nbsp;&nbsp;
                <Button
                  onClick={() => {
                    modalShow();
                  }}
                >
                  {formatMessage({ id: '模态框' })}
                </Button>
              </Col>
            </Row>
          </Form>

          <Divider />

          <h1>
            {formRecord.a} + {formRecord.b} = {result}
          </h1>

          <ModalDemo />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Form.create()(Index);
